<template>
  <div class="login">
    <div class="login-box">
      <h1 class="title">用户登录</h1>
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user-solid"
            placeholder="username"
            v-model.trim="loginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            show-password
            placeholder="password"
            v-model.trim="loginForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="doLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: "super-admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
      doLogin(){
          this.$refs['loginForm'].validate(async (valid)=>{
              if(valid){
                  let res = await this.userApi.doLogin(this.loginForm.value);
                  console.log(res);
              }else{
                  this.$message.error({
                      message: '用户名密码不能为空或输入内容有误'
                  })
              }
          })
      }
  },
};
</script>

<style scoped lang='scss'>
.login {
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;
  display: flex;
  align-items: center;
  justify-content: center;
  .login-box {
    width: 520px;
    height: 400px;
    // background-color: #fff;
    padding: 50px;
    .title {
      text-align: center;
      color: #eeeeee;
      margin-bottom: 40px;
    }
    .el-form {
      .el-form-item {
        ::v-deep .el-input__inner {
          background-color: #283443;
          font-size: 14px;
          color: #eee;
          border: 1px solid #3e4957;
          padding: 0 40px;
        }
        ::v-deep .el-input__inner:focus {
          border-color: #3e4957;
        }
      }
    }
  }
}
</style>
